<template>
	<view class="container">
		<view class="wrap">
			<template v-if='status == 0'>
				<view class="statuc-icon">
					<image src='/static/dengdai.png'></image>
				</view>
				<view class="text">待审核，请稍等</view>
				<view class="num"><text>{{cash}}</text>元</view>
				<view class="tip">操作完成后请上传“<text>充值凭证</text>”</view>
				<button class="btn line-center" @tap='toUpload'>上传充值凭证</button>
			</template>
			<template v-if='status == 1'>
				<view class="statuc-icon">
					<image src='/static/success-icon.png'></image>
				</view>
				<view class="text">充值成功</view>
				<view class="num"><text>{{cash}}</text>元</view>
				<view class="tip">你可在“<text>充值记录</text>”里查看相关信息</view>
				<button class="btn line-center" @tap='toRecord'>完成</button>
			</template>
			<template v-if='status == 2'>
				<view class="statuc-icon">
					<image src='/static/fail-icon.png'></image>
				</view>
				<view class="text">充值失败</view>
				<view class="num"><text>{{cash}}</text>元</view>
				<view class="tip">你可在“<text>充值记录</text>”里查看相关信息</view>
				<button class="btn line-center" @tap='toRecord'>完成</button>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cash:'',
				rechargeId:'',
				status:0,
			};
		},
		onLoad(option) {
			this.cash = option.num ? option.num : 0;
			this.rechargeId = option.id ? option.id : 0;
			this.status = option.status ? option.status : 0;
		},
		methods:{
			toUpload(){
				uni.navigateTo({
					url:`/pages/upload-credentials/upload-credentials?id=${this.rechargeId}`
				})
			},
			toRecord(){
				uni.navigateTo({
					url:'/pages/recharge-record/recharge-record'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-top: 100rpx;
	}
	.statuc-icon{
		width: 80rpx;
		height: 80rpx;
		margin:auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.text{
		font-weight: bold;
		text-align: center;
		margin-top:32rpx;
	}
	.num{
		text-align: center;
		margin-top:30rpx;
		text{
			font-family: 'DIN-BOLD';
			font-size: 72rpx;
		}
	}
	.tip{
		text-align: center;
		font-weight: bold;
		margin-top: 38rpx;
		text{
			color:#FF7A65;
		}
	}
	.btn{
		width: 654rpx;
		height: 84rpx;
		background: #000000;
		border-radius: 42rpx;
		margin:42rpx auto;
		color:#fff;
	}

</style>
